<template>
  <div>
    <div style="color: dodgerblue">订单结算页</div>
    
    <el-card>
      <div style="font-size: 12px; color: dodgerblue; cursor: pointer" 
           v-if="!state.address || !state.address.length" @click="router.push('/front/faddress')">
        还没有收货地址？去添加
      </div>
      <div v-for="item in state.address" :key="item.id" style="color: #666">
        <span @click="selectAddress(item)" style="display: inline-block; font-weight: bolder; cursor: pointer" :class="{'active': state.addressId === item.id}">{{ item.name }}</span>
        <span style="margin-left: 20px">{{ item.address }}</span>
        <span style="margin-left: 20px">{{ item.phone }}</span>
        
      </div>
    </el-card>
    
    <el-card style="margin: 10px 0">
      <div v-for="item in state.carts" :key="item.id" style="color: #666; margin: 10px; display: flex;">
        <img v-if="item.goods && item.goods.imgs" :src="item.goods.imgs[0].url" style="width: 120px; height: 120px">
        <div style="flex: 1; padding-left: 25px">
          <div style="font-weight: bolder; font-size: 20px">{{ item.goods.name }}</div>
          <div style="font-size: 18px; font-weight:bold; color: red">$ {{ item.goods.price }}</div>
          <div style="font-size: 8px; color: #888888">{{ item.goods.descr }}</div>
          <div style="font-size: 15px; font-weight:bold; color: coral">
            数量 × {{ item.num }}  
            <span style="font-size: 8px; margin-left: 15px; color: dodgerblue; cursor: pointer" @click="router.push('/front/fcart')">返回购物车修改</span>
          </div>
        </div>
      </div>
    </el-card>
    
    <el-card style="margin: 10px 0">
      <div style="text-align: right; font-weight: bolder; font-size:24px; color: orangered">应付总额：{{ state.total }} 大米</div>
      <div v-if="state.activeAddress.name" style="text-align: right; margin-top: 10px">
        <span style="font-size: 15px; font-weight: bold">
          <el-icon style="vertical-align: middle;"><ShoppingBag /></el-icon>收货人信息:
        </span>
        <span style="margin-left: 8px; color: dodgerblue; font-weight: bold">{{ state.activeAddress.name }}</span>
        <span style="margin-left: 8px; color: dodgerblue; font-weight: bold">{{ state.activeAddress.address }}</span>
        <span style="margin-left: 8px; color: dodgerblue; font-weight: bold">{{ state.activeAddress.phone }}</span>
      </div>
    </el-card>

    <div style="text-align: right; font-size: 3px">
      <span style="color: #888888;">下单前请您仔细确认订单与收件人信息</span>
    </div>
    <div style="margin: 8px 0; text-align: right">
      <el-button size="large" style="color: white; background: red; font-size: 20px" @click="addOrder">
        <el-icon><Wallet /></el-icon>&nbsp;立即下单
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { nextTick, reactive, ref } from "vue";
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import config from "../../../config";
import {useUserStore} from "@/stores/user";
import { useRoute,useRouter } from "vue-router";

const route = useRoute()
const router = useRouter()

const userStore = useUserStore()
const token = userStore.getBearerToken
const auths =  userStore.getAuths
const ids = route.query.id  // 拿到id

const state = reactive({
  address: [],
  addressId: 0,
  carts: [],
  activeAddress: {},
  total: 0
})

const loadAddress = () => {
  request.get('/address').then(res => {
    state.address = res.data
  })
}
loadAddress()

const loadCarts = () => {
  request.get('/cart/ids?ids=' + ids).then(res => {
    state.carts = res.data
    request.post('/cart/cal', res.data).then(res => {
      state.total = res.data
    })
  })
}
loadCarts()

const selectAddress = (item) => {
  state.addressId = item.id
  state.activeAddress = item
}

const addOrder = () => {
  if (!state.addressId) {
    // 没选地址
    ElMessage.warning('请选择地址后下单')
    return
  }
  request.post('/orders/addOrder?addressId=' + state.addressId, state.carts).then(res => {
  // request.post('/orders/addOrder/addressId=' + state.addressId, state.carts).then(res => {
    if (res.code === '200') {
      ElMessage.success("下单成功")
      router.push('/front/forders')
    } else {
      ElMessage.error(res.msg)
    }
  })
}
</script>

<style>
.active {
  border: 2px solid red; padding: 5px 15px; background-color: LavenderBlush; border-radius: 5px;
}
</style>
